<template>
  <div id="box1" class="font12" :style="{height}">
    <ul id="con2" ref="con1" :class="{anim:animate==true}">
      <li style="width: 100%" v-for='item in items' @click="goTo({name:'noticeDetail',params:{id:item.nid}})">
        <span>{{item.title}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    props:{
      items:{
        type: Array,
        default: function () {
          return [];
        }
      },
      height:{
        default:'35px',
      },
      frequence:{
        default:2000
      }
    },
    data() {
      return {
        animate: false,
        timer:null
      }
    },
    created(){
      this.timer = setInterval(this.scroll, this.frequence)
    },
    beforeDestroy(){
      clearInterval(this.timer);
    },
    methods: {
      scroll(){
        this.animate = true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
        setTimeout(()=> {      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
          this.items.push(this.items[0]);  // 将数组的第一个元素添加到数组的
          this.items.shift();               //删除数组的第一个元素
          this.animate = false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
        }, 500)
      },
      goTo(data){
        this.$router.push(data)
      },
    }
  }
</script>
<style>
  #box1{
    width: 100%;
    overflow: hidden;
  }
  .anim{
    transition: all 0.5s;
    margin-top: -35.5px;
  }
  #con2 li{
    list-style: none;
    line-height: 35px;
    height: 35px;
  }
  /*.text-oneLine{*/
    /*display:block;*/
    /*word-break:keep-all;*/
    /*white-space:nowrap;*/
    /*overflow:hidden;*/
    /*text-overflow:ellipsis;*/
  /*}*/
</style>
